<!--
   Copyright 2024 The Google Research Authors.
  
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<!DOCTYPE html>
<html>
<head>
<title>Click Button Sequence Login User Popup Task</title>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="../core/core.css">
<style>
  #subbtn1 { width: 40px; height: 40px; }
  #subbtn2 { width: 40px; height: 40px; }
  .bold { font-weight: bold; }
  input { margin: 5px; width: 100px; }
  input[id="password"] { width: 120px; }
  input[id="username"] { width: 120px; }
  #popup {
    position: absolute;
    top: 62px; left: 8px;
    width: 120px; height: 120px;
    border: 2px solid #888;
    background-color: #EEE;
    padding: 5px 10px; font-size: 12px;
    display: flex; flex-direction: column; justify-content: space-around;
  }
  #popup p {
    margin: 0; text-align: center;
  }
  /* 160 + 80 + 50 + 10 */
  #wrap,
  #sync-task-cover {
    height: 300px;
    width: 160px;
  }

  #click-canvas,
  #reward-display {
    left: 165px;
  }

  #query {
    background-color: #FF0;
    font-size: 10px;
    height: 54px;
    padding: 3px;
  }
</style>

<!-- JS -->
<script src="../core/core.js"></script>
<script src="../core/d3.v3.min.js"></script>
<script src="../common/ui_utils.js"></script>

<script>
core.EPISODE_MAX_TIME = 2000000;  // 2000 seconds

var genProblem = function() {
  // click-button-sequence
  var button_state = -1.0
  // var L = core.randi(0, 118); var U = core.randi(0, 118) + 50;
  var L = core.randi(0, 118); var U = core.randi(0, 38) + 60 + 160;
  d3.select('#subbtn1').attr('style', 'position:absolute; left:'+L+'px; top:'+U+'px');
  d3.select('#subbtn1').on('click', function(){
    if (button_state == -1.0) {
      button_state = 1.0
    } else {
      button_state = -2.0
    }
  });

  // var L = core.randi(0, 118); var U = core.randi(0, 118) + 50;
  var L = core.randi(0, 118); var U = core.randi(0, 38) + 60 + 160;
  d3.select('#subbtn2').attr('style', 'position:absolute; left:'+L+'px; top:'+U+'px');
  d3.select('#subbtn2').on('click', function(){
    if (button_state == 1.0) {
      button_state = 2.0
    } else {
      button_state = -2.0
    }
  });

  // login-user-popup
  d3.select('#username')[0][0].value ='';
  d3.select('#password')[0][0].value ='';

  var user = core.sample(ui_utils.FIFTY_NAMES).toLowerCase();
  var password = ui_utils.generateString(2,6)
  // instruction
  // d3.select('#query').html('Click button ONE, then click button TWO, and then enter the <span class="bold">username</span> "' + user + '" and the <span class="bold">password</span> "' + password + '" into the text fields and press login.');
  d3.select('#query').html('Enter the <span class="bold">username</span> "' + user + '" and the <span class="bold">password</span> "' + password + '" into the text fields and press login, after clicking button ONE, then clicking button TWO.');

  // reward awarder
  d3.select('#subbtn').on('click', function(){
    var u = d3.select('#username')[0][0].value;
    var p = d3.select('#password')[0][0].value;
    var r = (u === user && p === password) ? 1.0 : -1.0;
    if (button_state == 2.0) {
        core.endEpisode(r, r > 0);
    } else {
        core.endEpisode(-1.0);
    }
  });

  // Clean the previous states
  d3.selectAll('#username, #password, #subbtn').attr('disabled', null);
  d3.select('#popup').remove();
  var popupShown = false;

  // Random Popup 
  function showPopup () {
    if (popupShown) return;
    d3.selectAll('#username, #password, #subbtn').attr('disabled', 'disabled');
    var message
    if (Math.random() < 0.85) {
      message = 'Your session is ' + core.sample([
          'about to expire.',
          'about to time out.',
          'expiring soon.',
          'soon to expire.',
          'timing out soon.',
          'going to expire soon.',
          'going to time out soon.',
          ]);
    } else {
      message = core.sample([
        'You are running out of time, aren\'t you?',
        'You have 10 new messages.',
        'Your mother is calling you for dinner.',
        'Please do not panic.',
        'This is an annoying popup message.',
        'It looks like you are trying to log in.',
        'You look good today.',
        'Sorry for this annoying message.',
        ]);
    }
    d3.select('#area').append('div').attr('id', 'popup').html(`
        <p>` + message + `</p>
        <p>Exit to home page?</p>
        <p><button id=popup-ok>OK</button> <button id=popup-cancel>Cancel</button>`);
    d3.select('#popup-ok').on('click', function () {
      core.endEpisode(-1);
    });
    d3.select('#popup-cancel').on('click', function () {
      d3.selectAll('#username, #password, #subbtn').attr('disabled', null);
      d3.select('#popup').remove();
    });
    popupShown = true;
  }
  var popupMode = core.sample([
      'username', 'password', null, null,
      ]);
  d3.select('#username').on('focus', popupMode != 'username' ? null : showPopup);
  d3.select('#password').on('focus', popupMode != 'password' ? null : showPopup);
}

window.onload = function() {
  core.startEpisode();
}
</script>
</head>
<!-- Base HTML -->
<body>
<div id="wrap">
  <div id="query"></div>
  <div id="area">
    <button id="subbtn1">ONE</button>
    <button id="subbtn2">TWO</button>
    <div id="form">
      <p><label class="bold">Username</label><input type="text" id="username"></p>
      <p><label class="bold">Password</label><input type="password" id="password"></p>
      <button id="subbtn" class="secondary-action">OK</button>
    </div>
  </div>
</div>
</body>
</html>
